import {WeaInputSearch,WeaTools,WeaErrorPage} from 'ecCom'
import { observer} from 'mobx-react';
import isEqual from 'lodash/isEqual';
import ItemDialog from './ItemDialog'

@observer
class CardItem extends React.Component{
	constructor(props) {
        super(props);
        this.state = {
			width: 0,
        }
    }
	componentDidMount(){
		if (!document.getElementsByClassName) {
		    document.getElementsByClassName = function (className, element) {
		        var children = (element || document).getElementsByTagName('*');
		        var elements = new Array();
		        for (var i = 0; i < children.length; i++) {
		            var child = children[i];
		            var classNames = child.className.split(' ');
		            for (var j = 0; j < classNames.length; j++) {
		                if (classNames[j] == className) {
		                    elements.push(child);
		                    break;
		                }
		            }
		        }
		        return elements;
		    };
		}
		let coms = document.getElementsByClassName('g-cardItem-main')[0];
		!!coms.offsetWidth && this.setState({width:coms.offsetWidth});
	}
/* 	shouldComponentUpdate(nextProps,nextState) {
		const wfbean = this.props.wfbean;
		const wfbeanNext = nextProps.wfbean;
        return !isEqual(wfbean, wfbeanNext) 
			|| this.props.iscommon !== nextProps.iscommon
			//|| this.props.num !== nextProps.num
			|| this.state.width !== nextState.width;
    } */
	render(){
		const {wfbean,openModal} = this.props;
		const {width} = this.state;
		const {beagenters,belongtoUsers,wfColl,isImportWf,id,name,visible} = wfbean;
		return (
                <div className="g-top-cardItem">
				<div className="g-cardItem-main" key={id}  >
					<div className="g-cardItem-font" onClick = {this.isOpenModal.bind(this,id,true)} >
						<a title={name}>{name}</a>
					</div>
					<div className = "dialog">
						<ItemDialog ecId={`${this && this.props && this.props.ecId || ''}_ItemDialog@k4nmcs`} visible={visible} doClose={this.isOpenModal.bind(this,id,false)} id={id}></ItemDialog>
					</div>
				</div>
                </div>
			   )
	}
	
	/**
	 * 新建点击事件
	 * @param {*} id 
	 * @param {*} bool 
	 */
	isOpenModal(id,bool){
		const {openModal} = this.props;
		openModal(id,bool);
	}
	
	openFullWindowHaveBar(url){
		var redirectUrl = url;
		var width = screen.availWidth - 10;
		var height = screen.availHeight - 50;
		var szFeatures = "top=0,";
		szFeatures += "left=0,";
		szFeatures += "width=" + width + ",";
		szFeatures += "height=" + height + ",";
		szFeatures += "directories=no,";
		szFeatures += "status=yes,toolbar=no,location=no,";
		szFeatures += "menubar=no,";
		szFeatures += "scrollbars=yes,";
		szFeatures += "resizable=yes"; //channelmode
		window.open(redirectUrl, "", szFeatures);
	}
}

export default CardItem

//export default WeaTools.tryCatch(React, 
//  props => <WeaErrorPage msg={ props.error ? props.error : '对不起，该页面异常，请联系管理员！'} />,
//  {error: ""}
//)(CardItem);